<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:title" content="Social Buttons for Bootstrap" />
    <meta property="og:description" content="Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome!" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="http://lipis.github.io/bootstrap-social/" />
    <meta property="og:image" content="http://lipis.github.io/bootstrap-social/assets/img/bootstrap-social.png" />

    <title>Social Buttons for Bootstrap</title>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/font-awesome.css" rel="stylesheet">
    <link href="assets/css/docs.css" rel="stylesheet" >

    <!-- SweetAlert for Bootstrap -->
    <script src="//lipis.github.io/bootstrap-sweetalert/lib/sweet-alert.js"></script>
    <link href="//lipis.github.io/bootstrap-sweetalert/lib/sweet-alert.css" rel="stylesheet">

    <link href="bootstrap-social.css" rel="stylesheet" >

    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-42119746-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>

  </head>

  <body>
    <div class="jumbotron">
      <div class="container">
        <h1>Social Buttons for Bootstrap</h1>
        <p>
          Social Sign-In Buttons made in pure CSS based on
          <a href="http://twitter.github.io/bootstrap/">Bootstrap</a> and
          <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>!
        </p>
        <a href="https://github.com/lipis/bootstrap-social" class="btn btn-outline btn-large" onclick="_gaq.push(['_trackEvent', 'exit', 'header', 'GitHub']);"><i class="fa fa-github"></i> View on GitHub</a>
        <ul class="jumbotron-links">
          <li><a href="http://lipis.github.io/bootstrap-sweetalert" onclick="_gaq.push(['_trackEvent', 'exit', 'header', 'bootstrap-sweetalert']);"><i class="fa fa-exclamation-triangle"></i> bootstrap-sweetalert</a></li>
          <li><a href="http://lipis.github.io/flag-icon-css" onclick="_gaq.push(['_trackEvent', 'exit', 'header', 'flag-icon-css']);"><i class="fa fa-flag"></i> flag-icon-css</a></li>
        </ul>
        <iframe src="http://ghbtns.com/github-btn.html?user=lipis&amp;repo=bootstrap-social&amp;type=watch&amp;count=true" class="social-share"></iframe>
        <a href="https://twitter.com/share" class="social-share twitter-share-button" data-url="http://lipis.github.io/bootstrap-social/" data-text="Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome!" data-via="lipis" data-hashtags="bootstrap css">Tweet</a>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm-offset-3 col-sm-6">
          <div class="alert alert-success lead text-center">
            Check out the latest project<br>
            <a class="sweet-alert-link alert-link" href="#" onclick="_gaq.push(['_trackEvent', 'exit', 'header', 'flag-icon-css']); return null;">SweetAlert for Bootstrap</a>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4 social-buttons">
          <h3>The Buttons</h3>
          <a class="btn btn-block btn-social btn-adn" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-adn']);">
            <i class="fa fa-adn"></i> Sign in with App.net
          </a>
          <a class="btn btn-block btn-social btn-bitbucket" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-bitbucket']);">
            <i class="fa fa-bitbucket"></i> Sign in with Bitbucket
          </a>
          <a class="btn btn-block btn-social btn-dropbox" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-dropbox']);">
            <i class="fa fa-dropbox"></i> Sign in with Dropbox
          </a>
          <a class="btn btn-block btn-social btn-facebook" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-facebook']);">
            <i class="fa fa-facebook"></i> Sign in with Facebook
          </a>
          <a class="btn btn-block btn-social btn-flickr" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-flickr']);">
            <i class="fa fa-flickr"></i> Sign in with Flickr
          </a>
          <a class="btn btn-block btn-social btn-foursquare" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-foursquare']);">
            <i class="fa fa-foursquare"></i> Sign in with Foursquare
          </a>
          <a class="btn btn-block btn-social btn-github" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-github']);">
            <i class="fa fa-github"></i> Sign in with GitHub
          </a>
          <a class="btn btn-block btn-social btn-google-plus" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google-plus']);">
            <i class="fa fa-google-plus"></i> Sign in with Google
          </a>
          <a class="btn btn-block btn-social btn-instagram" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-instagram']);">
            <i class="fa fa-instagram"></i> Sign in with Instagram
          </a>
          <a class="btn btn-block btn-social btn-linkedin" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-linkedin']);">
            <i class="fa fa-linkedin"></i> Sign in with LinkedIn
          </a>
          <a class="btn btn-block btn-social btn-microsoft" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-microsoft']);">
            <i class="fa fa-windows"></i> Sign in with Microsoft
          </a>
          <a class="btn btn-block btn-social btn-openid" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-openid']);">
            <i class="fa fa-openid"></i> Sign in with OpenID
          </a>
          <a class="btn btn-block btn-social btn-pinterest" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-pinterest']);">
            <i class="fa fa-pinterest"></i> Sign in with Pinterest
          </a>
          <a class="btn btn-block btn-social btn-reddit" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-reddit']);">
            <i class="fa fa-reddit"></i> Sign in with Reddit
          </a>
          <a class="btn btn-block btn-social btn-soundcloud" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-soundcloud']);">
            <i class="fa fa-soundcloud"></i> Sign in with SoundCloud
          </a>
          <a class="btn btn-block btn-social btn-tumblr" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-tumblr']);">
            <i class="fa fa-tumblr"></i> Sign in with Tumblr
          </a>
          <a class="btn btn-block btn-social btn-twitter" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-twitter']);">
            <i class="fa fa-twitter"></i> Sign in with Twitter
          </a>
          <a class="btn btn-block btn-social btn-vimeo" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-vimeo']);">
            <i class="fa fa-vimeo-square"></i> Sign in with Vimeo
          </a>
          <a class="btn btn-block btn-social btn-vk" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-vk']);">
            <i class="fa fa-vk"></i> Sign in with VK
          </a>
          <a class="btn btn-block btn-social btn-yahoo" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-yahoo']);">
            <i class="fa fa-yahoo"></i> Sign in with Yahoo!
          </a>

          <hr>

          <div class="text-center">
            <a class="btn btn-social-icon btn-adn" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-adn']);"><i class="fa fa-adn"></i></a>
            <a class="btn btn-social-icon btn-bitbucket" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-bitbucket']);"><i class="fa fa-bitbucket"></i></a>
            <a class="btn btn-social-icon btn-dropbox" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-dropbox']);"><i class="fa fa-dropbox"></i></a>
            <a class="btn btn-social-icon btn-facebook" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-facebook']);"><i class="fa fa-facebook"></i></a>
            <a class="btn btn-social-icon btn-flickr" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-flickr']);"><i class="fa fa-flickr"></i></a>
            <a class="btn btn-social-icon btn-foursquare" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-foursquare']);"><i class="fa fa-foursquare"></i></a>
            <a class="btn btn-social-icon btn-github" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-github']);"><i class="fa fa-github"></i></a>
            <a class="btn btn-social-icon btn-google-plus" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-google-plus']);"><i class="fa fa-google-plus"></i></a>
            <a class="btn btn-social-icon btn-instagram" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-instagram']);"><i class="fa fa-instagram"></i></a>
            <a class="btn btn-social-icon btn-linkedin" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-linkedin']);"><i class="fa fa-linkedin"></i></a>
            <a class="btn btn-social-icon btn-microsoft" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-microsoft']);"><i class="fa fa-windows"></i></a>
            <a class="btn btn-social-icon btn-openid" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-openid']);"><i class="fa fa-openid"></i></a>
            <a class="btn btn-social-icon btn-pinterest" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-pinterest']);"><i class="fa fa-pinterest"></i></a>
            <a class="btn btn-social-icon btn-reddit" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-reddit']);"><i class="fa fa-reddit"></i></a>
            <a class="btn btn-social-icon btn-soundcloud" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-soundcloud']);"><i class="fa fa-soundcloud"></i></a>
            <a class="btn btn-social-icon btn-tumblr" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-tumblr']);"><i class="fa fa-tumblr"></i></a>
            <a class="btn btn-social-icon btn-twitter" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-twitter']);"><i class="fa fa-twitter"></i></a>
            <a class="btn btn-social-icon btn-vimeo" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-vimeo']);"><i class="fa fa-vimeo-square"></i></a>
            <a class="btn btn-social-icon btn-vk" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-vk']);"><i class="fa fa-vk"></i></a>
            <a class="btn btn-social-icon btn-yahoo" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-yahoo']);"><i class="fa fa-yahoo"></i></a>
          </div>
        </div>

        <div class="col-sm-4">
          <h3>Available Classes</h3>
          <ul class="social-class list-unstyled">
            <li data-code="adn" data-name="App.net"><code>btn-adn</code> <span class="social-hex">#D87A68</span></li>
            <li data-code="bitbucket" data-name="Bitbucket"><code>btn-bitbucket</code> <span class="social-hex">#205081</span></li>
            <li data-code="dropbox" data-name="Dropbox"><code>btn-dropbox</code> <span class="social-hex">#1087DD</span></li>
            <li data-code="facebook" data-name="Facebook"><code>btn-facebook</code> <span class="social-hex">#3B5998</span></li>
            <li data-code="flickr" data-name="Flickr"><code>btn-flickr</code> <span class="social-hex">#2BA9E1</span></li>
            <li data-code="foursquare" data-name="Foursquare"><code>btn-foursquare</code> <span class="social-hex">#f94877</span></li>
            <li data-code="github" data-name="GitHub"><code>btn-github</code> <span class="social-hex">#444444</span></li>
            <li data-code="google-plus" data-name="Google"><code>btn-google-plus</code> <span class="social-hex">#DD4B39</span></li>
            <li data-code="instagram" data-name="Instagram"><code>btn-instagram</code> <span class="social-hex">#3F729B</span></li>
            <li data-code="linkedin" data-name="LinkedIn"><code>btn-linkedin</code> <span class="social-hex">#007BB6</span></li>
            <li data-code="microsoft" data-icon="windows" data-name="Microsoft"><code>btn-microsoft</code> <span class="social-hex">#2672EC</span></li>
            <li data-code="openid" data-name="OpenID"><code>btn-openid</code> <span class="social-hex">#F7931E</span></li>
            <li data-code="pinterest" data-name="Pinterest"><code>btn-pinterest</code> <span class="social-hex">#CB2027</span></li>
            <li data-code="reddit" data-name="Reddit"><code>btn-reddit</code> <span class="social-hex">#EFF7FF</span></li>
            <li data-code="soundcloud" data-name="SoundCloud"><code>btn-soundcloud</code> <span class="social-hex">#FF5500</span></li>
            <li data-code="tumblr" data-name="Tumblr"><code>btn-tumblr</code> <span class="social-hex">#CB2027</span></li>
            <li data-code="twitter" data-name="Twitter"><code>btn-twitter</code> <span class="social-hex">#55ACEE</span></li>
            <li data-code="vimeo" data-icon="vimeo-square" data-name="Vimeo"><code>btn-vimeo</code> <span class="social-hex">#1AB7EA</span></li>
            <li data-code="vk" data-name="VK"><code>btn-vk</code> <span class="social-hex">#587EA3</span></li>
            <li data-code="yahoo" data-name="Yahoo!"><code>btn-yahoo</code> <span class="social-hex">#720E9E</span></li>
          </ul>
        </div>
        <div class="col-sm-4">
          <div class="social-sizes">
            <h3>Different Sizes</h3>
            <a class="btn btn-block btn-social btn-lg btn-google-plus" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-lg']);">
              <i class="fa fa-google-plus"></i>
              Sign in with Google
            </a>
            <a class="btn btn-block btn-social btn-google-plus" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-md']);">
              <i class="fa fa-google-plus"></i>
              Sign in with Google
            </a>
            <a class="btn btn-block btn-social btn-sm btn-google-plus" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-sm']);">
              <i class="fa fa-google-plus"></i>
              Sign in with Google
            </a>
            <a class="btn btn-block btn-social btn-xs btn-google-plus" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-xs']);">
              <i class="fa fa-google-plus"></i>
              Sign in with Google
            </a>
            <hr>
            <div class="text-center">
              <a class="btn btn-social-icon btn-lg btn-google-plus" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-lg']);"><i class="fa fa-google-plus"></i></a>
              <a class="btn btn-social-icon btn-google-plus" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-md']);"><i class="fa fa-google-plus"></i></a>
              <a class="btn btn-social-icon btn-sm btn-google-plus" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-sm']);"><i class="fa fa-google-plus"></i></a>
              <a class="btn btn-social-icon btn-xs btn-google-plus" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-xs']);"><i class="fa fa-google-plus"></i></a>
            </div>
          </div>
          <hr>
          <div class="alert alert-info">
            <h4>Check them out in real projects</h4>
            <ul>
              <li><a class="alert-link" href="https://gae-init.appspot.com/signin/" onclick="_gaq.push(['_trackEvent', 'exit', 'body', 'gae-init']);">gae-init</a></li>
              <li><a class="alert-link" href="https://restaurant.app.foodit.com/rms/signin" onclick="_gaq.push(['_trackEvent', 'exit', 'body', 'foodit']);">FOODit</a></li>
            </ul>
          </div>
        </div>
      </div>
      <hr>
    </div>
    <div class="how-to">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-md-offset-2">
            <h2>How to use</h2>
            <ol>
              <li>
                Include Bootstrap and Font Awesome
                <p>
                  If you haven't done that already, include the latest
                  <a href="http://twitter.github.io/bootstrap/">Bootstrap</a>
                  and <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> in your project.
                </p>
              </li>
              <li>
                Include the CSS or LESS
                <p>
                  You have two options for enabling the social buttons in your project:
                  vanilla CSS or source LESS. For vanilla CSS, just include the
                  <code>bootstrap-social.css</code> file into your project.
                </p>
                <p>
                  For LESS, copy the <code>bootstrap-social.less</code> into
                  your existing Bootstrap directory and import it into
                  <code>bootstrap.less</code> via
                  <code>@import "bootstrap-social.less";</code>. Recompile when ready.
                </p>
              </li>
              <li>
                Add some buttons!
                <p>
                  Start using the buttons as you would normally do with the
                  Bootstrap buttons that have an icon by adding the relevant
                  class. For example:
                </p>
                <pre>
  &lt;a class=&quot;btn btn-block <strong class="text-danger">btn-social</strong> <strong class="text-info">btn-twitter</strong>&quot;&gt;
    &lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt; Sign in with Twitter
  &lt;/a&gt;</pre>
                <p>
                  Or if you just want the icon button, use it like this:
                </p>
                <pre>
  &lt;a class=&quot;btn <strong class="text-danger">btn-social-icon</strong> <strong class="text-info">btn-twitter</strong>&quot;&gt;
    &lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;
  &lt;/a&gt;</pre>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <footer>
      <ul class="links">
        <li><a href="http://lip.is" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'Lipis']);">Lipis</a></li>
        <li><a href="http://github.com/lipis" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'GitHub']);"><i class="fa fa-github"></i> GitHub</a></li>
        <li><a href="http://twitter.com/lipis" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'Twitter']);"><i class="fa fa-twitter"></i> Twitter</a></li>
        <li><a href="http://google.com/+PanayiotisLipiridis" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'Google+']);"><i class="fa fa-google-plus"></i> Google+</a></li>
        <li><a href="http://opensource.org/licenses/MIT" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'MIT']);"><i class="fa fa-building"></i> MIT License</a></li>
      </ul>
    </footer>
    <a href="https://github.com/lipis/bootstrap-social"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>

    <!-- Some JavaScript that is used only in this demo, not needed for the buttons -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/docs.js"></script>
    <script>
      !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
    </script>

    <script>
      document.querySelector('.sweet-alert-link').onclick = function(){
        swal({
          title: "SweetAlert for Bootstrap!",
          text: "It exactly what you see here.",
          type: "success",
          showCancelButton: true,
          confirmButtonClass: 'btn-success',
          confirmButtonText: 'Take me there!',
          cancelButtonText: "Cancel",
          closeOnConfirm: false,
          closeOnCancel: false
        },
        function(isConfirm){
          if (isConfirm){
            window.location.href = "http://lipis.github.io/bootstrap-sweetalert/";
          } else {
            swal("Thanks!", "But I still think you should visit it.", "warning");
          }
        });
      };
    </script>
  </body>
</html>
